<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="130px">
                <el-form-item label="用户名称">
					<el-input
						class="w-[240px]"
						v-model="queryParams.name"
						clearable
					/>
				</el-form-item>
                <el-form-item label="用户账号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.phone"
						clearable
					/>
				</el-form-item>
				<el-form-item class="w-80">
                    <el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
			</el-card>
		<el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="80" />
				<el-table-column label="订单编号" prop="sn" min-width="220" />
                <el-table-column label="下单用户" prop="real_name" min-width="140" />
                <el-table-column label="用户账号" prop="account" min-width="180" />
                <el-table-column label="支付金额" prop="actual_money" min-width="120" />
                <el-table-column label="支付方式" prop="pay_type" min-width="120" >
                    <template #default="{ row }">
                        <span v-if="row.pay_type == 1">微信</span>
                        <span v-if="row.pay_type == 2">支付宝</span>
                        <span v-if="row.pay_type == 3">对公</span>
                        <span v-if="row.pay_type == 4">余额</span>
                    </template>
                </el-table-column>
                <el-table-column label="款项备注" prop="back_notice" min-width="180">
                    <template #default="{ row }">
                        <span>助融星链功能1年使用权</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付时间" prop="pay_time" min-width="190" />
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
            
		</el-card>
	</div>
</template>
<script lang="ts" setup name="crmOrderList">
	import { crmOrderList } from '@/api/finance';
	import { usePaging } from '@/hooks/usePaging';
	const queryParams:any = reactive({
        name: '',
        phone: ''
	})
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: crmOrderList,
		params: queryParams
	})
    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	getLists()
</script>
<style lang="scss" scoped>
.piker{
    width: 370px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
.line-clamp2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>